<template>
  <div class="weather">
    <div id="he-plugin-standard"></div>
  </div>
</template>         
<script>
window.WIDGET = {
  "CONFIG": {
    "layout": "1",
    "width": "320",
    "height": "150",
    "background": "4",
    "backgroundColor": "00aaa0",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "46b58f569b18404fa3f5c2c1648fa189"
  }
}
export default {
  //vue2.x写法
    mounted() {
      this.$nextTick(() => {
        this.load()
      })
    },
    methods: {
      load() {
        const s = document.createElement('script')
        s.type = 'text/javascript'
        s.src =
          'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
        document.body.appendChild(s)
      },
    },

  //vue3.0的写法
  // setup() {
  //   onMounted(() => {
  //     weather()
  //   });
  //   const weather = () => {
  //     const s = document.createElement("script");
  //     s.type = "text/javascript";
  //     s.src =
  //       "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
  //     document.body.appendChild(s);
  //   };

  //   return {};
  // }
};
</script>
<style>
.wv-lt-refresh {
  display: none !important;
}
</style>
<style scoped>
.weather {
  width: 60px !important;
  height: 100%;
}
#he-plugin-standard {
  background: rgb(30, 170, 160) !important;
}

</style>